<template>
  <el-select :popper-class="multiple ? 'jryyb-select-multiple' : ''" ref="jryybSelect" :multiple="multiple" v-model="modelValue" v-bind="$attrs" v-on="$listeners" @change="onChange"
             style="width: 100%;" @visible-change="onVisibleChange">
    <div class="checkbox-box"><el-checkbox v-if="showAllCheckbox && multiple" @change="selectAll" v-model="checkedAll">全选</el-checkbox></div>
    <el-option v-if="!notShowAllOption" :label="allOptionLabel" :value="allOptionValue"></el-option>
    <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  name: "index",
  props: {
    value: {
      type: [String, Number, Boolean, Array],
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    labelName: {
      type: String,
      default: 'label'
    },
    valueName: {
      type: String,
      default: 'value'
    },
    allOptionLabel: {
      type: String,
      default: '全部'
    },
    allOptionValue: {
      type: [String, Number],
      default: 'all'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showAllCheckbox: {
      type: Boolean,
      default: false
    },
    notShowAllOption: {
      type: Boolean,
      default: false
    },
    syncKeys: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    modelValue: {
      get() {
        if (this.multiple) {
          this.selectedArray = this.value || []
        }
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    list() {
      const list = this.options.map(item => {
        return {
          label: item[this.labelName],
          value: item[this.valueName],
          ...item
        }
      })
      return list
    }
  },
  data() {
    return {
      checkedAll: false,
      selectedArray: []
    }
  },
  methods: {
    onChange(val) {
      if (this.multiple && this.showAllCheckbox && val instanceof Array) {
        if (val.length === this.options.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      }
      this.$emit('changed', val);
      this.syncKeys.forEach(key => {
        this.$emit(`update:${key}`, val[key]);
      })
    },
    onVisibleChange(val) {

      if (!val) {
        this.checkedAll = false
      } else {
        if (this.multiple && this.showAllCheckbox && this.value instanceof Array) {
          if (this.value.length === this.options.length) {
            this.checkedAll = true
          } else {
            this.checkedAll = false
          }
        }
      }
    },
    selectAll() {
      this.selectedArray = []
      if (this.checkedAll) {
        this.options.map(item => {
          this.selectedArray.push(item[this.valueName])
        })
      }
      this.$emit('input', this.selectedArray)
      this.$emit('changed', this.selectedArray);
      this.syncKeys.forEach(key => {
        this.$emit(`update:${key}`, this.selectedArray.map(i => i[key]).join(","));
      })
      this.$nextTick(() => {
        this.$refs.jryybSelect.blur()
      })
    }
  }
}
</script>

<style lang="scss">
.jryyb-select-multiple {
  .el-select-dropdown__list {
    padding-top: 40px;
  }
  .checkbox-box {
    z-index: 1;
    background-color: #fff;
    box-shadow: 2px 0 3px #eee;
    padding-top: 6px;
    width: 100%;
    height: 34px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .el-checkbox {
    width: 100%;
    text-align: right;
    padding-right: 10px;
  }
}
</style>
